<template>
    <el-form ref="ruleFormRef" class="form" size="large" :model="ruleForm" :rules="rules" label-width="auto" status-icon >
        <el-descriptions size="small" border :column="2">
            <el-descriptions-item :span="2">
                <template #label>
                    <div class="cell-item" style="width: 20px;">　　　　　</div>
                </template>
                <el-descriptions  border :column="2">
                    <el-descriptions-item label="项目名称　　" :span="2"><div style="width: 100%"><el-text>{{ project.title }}</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="项目地址　　" :span="2"><div style="width: 100%;"><el-text>{{ project.address }}</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="合同总金额　"><div style="width: 500px;"><el-text>{{ project.price }}</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="合同税率　　"><div style="width: 500px;"><el-text>{{ project.tax_rate }}%</el-text></div></el-descriptions-item>
                </el-descriptions>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
                <template #label>
                    <div class="cell-item" style="width: 20px;">销售方信息</div>
                </template>
                <el-descriptions border :column="2">
                    <el-descriptions-item label="单位名称　　"><div style="width: 500px;"><el-text>{{ ruleForm.name }}</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="地址　　　　"><div style="width: 500px;"><el-text>{{ ruleForm.address }}</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="纳税人识别号"><el-text>{{ ruleForm.tax_id }}</el-text></el-descriptions-item>
                    <el-descriptions-item label="电话　　　　"><el-text>{{ ruleForm.mobile }}</el-text></el-descriptions-item>
                    <el-descriptions-item label="开户银行　　"><el-text>{{ ruleForm.bank }}</el-text></el-descriptions-item>
                    <el-descriptions-item label="开户行号　　"><el-text>{{ ruleForm.bank_number }}</el-text></el-descriptions-item>
                    <el-descriptions-item label="银行账号　　"><el-text>{{ ruleForm.bank_account }}</el-text></el-descriptions-item>
                    <el-descriptions-item label="邮箱　　　　"><el-text>{{ ruleForm.email }}</el-text></el-descriptions-item>
                    <el-descriptions-item label="邮政编码　　"><el-text>{{ ruleForm.postal_code }}</el-text></el-descriptions-item>
                </el-descriptions>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
                <template #label>
                    <div class="cell-item" style="width: 20px;">购买方信息</div>
                </template>
                <el-descriptions border :column="2">
                    <el-descriptions-item label="单位名称　　"><div style="width: 500px;"><el-input class="no-border-input" v-model="ruleForm.b_name"  /></div></el-descriptions-item>
                    <el-descriptions-item label="地址　　　　"><div style="width: 500px;"><el-input class="no-border-input"  v-model="ruleForm.b_address"  /></div></el-descriptions-item>
                    <el-descriptions-item label="纳税人识别号"><div style="width: 500px;"><el-input class="no-border-input"  v-model="ruleForm.b_tax_id"  /></div></el-descriptions-item>
                    <el-descriptions-item label="电话　　　　"><div style="width: 500px;"><el-input class="no-border-input"  v-model="ruleForm.b_mobile"  /></div></el-descriptions-item>
                    <el-descriptions-item label="开户银行　　"><div style="width: 500px;"><el-input class="no-border-input"  v-model="ruleForm.b_bank"  /></div></el-descriptions-item>
                    <el-descriptions-item label="开户行号　　"><div style="width: 500px;"><el-input class="no-border-input"  v-model="ruleForm.b_bank_number"  /></div></el-descriptions-item>
                    <el-descriptions-item label="银行账号　　"><div style="width: 500px;"><el-input class="no-border-input"  v-model="ruleForm.b_bank_account"  /></div></el-descriptions-item>
                    <el-descriptions-item label="邮箱　　　　"><div style="width: 500px;"><el-input class="no-border-input"  v-model="ruleForm.b_email"  /></div></el-descriptions-item>
                    <el-descriptions-item label="邮政编码　　"><div style="width: 500px;"><el-input class="no-border-input"  v-model="ruleForm.b_postal_code"  /></div></el-descriptions-item>
                </el-descriptions>
            </el-descriptions-item>

            <el-descriptions-item :span="2">
                <template #label>
                    <div class="cell-item" style="width: 20px;">　　　　　</div>
                </template>
                <el-descriptions  border :column="2">
                    <el-descriptions-item label="本次开票　　" >
                        <div style="width: 500px;"><el-input-number class="no-border-input" :precision="2" style="width: 100%" v-model="ruleForm.price" @change="onPrice" /></div>
                    </el-descriptions-item>
                    <el-descriptions-item label="类型　　　　" >
                        <div style="width: 500px;">
                            <el-text>{{ project.tax_type }}</el-text>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="税率　　　　">
                        <el-text>{{ ruleForm.tax_rate }}%</el-text>
                    </el-descriptions-item>
                    <el-descriptions-item label="税金　　　　"><div style="width: 500px;"><el-text>{{ ruleForm.tax_price }}</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="累计开票金额"><div style="width: 500px;"><el-text>{{ ruleForm.invoice_amount }}</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="占比率　　　"><div style="width: 500px;"><el-text>{{ ruleForm.mix }}%</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="开票申请人　"><div style="width: 500px;"><el-text>{{ user.name }}</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="价税合计(大写)"><div style="width: 500px;"><el-text>{{ ruleForm.china_price }}</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="发票备注　　　　"><el-input  class="no-border-input" v-model="ruleForm.remarks" :rows="4" type="textarea" :autosize="{ minRows: 4 }" /></el-descriptions-item>
                </el-descriptions>
            </el-descriptions-item>
        </el-descriptions>
    </el-form>
    <div class="text-center mt30">
        <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading"> 保存 </el-button>
        <el-button type="info" @click="router.go(-1)"> 返回 </el-button>
        <component :is="applyButton" model = "ProjectInvoice" source = "ProjectInvoice" :price="ruleForm.price" :id = id />
        <component :is="applyRevoke" model = "ProjectInvoice" source = "ProjectInvoice" :id = id />
        <el-button @click="printElement"> 打印预览 </el-button>
    </div>

    <el-dialog v-model="isPrint" title="打印内容" width="900px">
        <component id="print" :is="invoiceForm" :data = id :type="true" />
    </el-dialog>

</template>
  
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import http from '../../../util/request';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import func from '../../../util/function';
import { useRouter } from 'vue-router';
import router from '../../../router';
import applyButton from "@/components/applyButton.vue";
import applyRevoke from "@/components/applyRevoke.vue";
import invoiceForm from '@/components/invoiceForm.vue';
const loading = ref<boolean>(false)
const ruleFormRef = ref<FormInstance>()
let project = ref<any>({})
const id:any = ref(useRouter().currentRoute.value.params.id)
let user:any = sessionStorage.getItem('user')
user = JSON.parse(user)
const isPrint = ref<boolean>(false)

interface RuleForm {
    id:number
    price:number
    china_price:string
    tax_rate:number
    tax_price:number|string
    type:string
    
    name: string
    tax_id: string
    address: string
    mobile: string
    bank: string
    bank_number:number
    bank_account:number
    email:string
    postal_code:string

    b_name: string
    b_tax_id: string
    b_address: string
    b_mobile: string
    b_bank: string
    b_bank_number:number
    b_bank_account:number
    b_email:string
    b_postal_code:string

    invoice_amount: number
    invoice_type: string
    invoice_content:string
    mix:number
    user_id:number
    remarks:string

    is:boolean
}

const ruleForm = ref<RuleForm>({
    id:0,
    price:0,
    china_price:'',
    tax_rate:0,
    tax_price:0,
    type:'',
    
    name: '/',
    tax_id: '/',
    address: '/',
    mobile: '/',
    bank: '/',
    bank_number:0,
    bank_account:0,
    email:'/',
    postal_code:'/',

    b_name: '/',
    b_tax_id: '/',
    b_address: '/',
    b_mobile: '/',
    b_bank: '/',
    b_bank_number:0,
    b_bank_account:0,
    b_email:'/',
    b_postal_code:'/',

    invoice_amount: 0,
    invoice_type: '/',
    invoice_content:'/',
    mix:0,
    user_id:0,
    remarks:'/',

    is:true
})

const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: '请输入甲方名称', trigger: 'blur' },
    ],
    tax_id: [
        { required: true, message: '请输入甲方税号', trigger: 'blur' },
    ],
    address: [
        { required: true, message: '请输入甲方地址', trigger: 'blur' },
    ],
    mobile: [
        { required: true, message: '请输入甲方联系电话', trigger: 'blur' },
    ],
    bank: [
        { required: true, message: '请输入甲方开户银行', trigger: 'blur' },
    ],
    bank_account: [
        { required: true, message: '请输入支付方式', trigger: 'blur' },
    ],

    invoice_type: [
        { required: true, message: '请输入发票类型', trigger: 'blur' },
    ],
    invoice_content: [
        { required: true, message: '请输入开票内容', trigger: 'blur' },
    ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if(!ruleForm.value.is){
        ElMessage.error('审批中，无法修改');
        return
    }

    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            let request:any = null
            ruleForm.value.tax_rate = project.value.tax_rate
            if(ruleForm.value.id){
                request = http.patch('/projectInvoice',ruleForm.value)
            }else{
                request = http.put('/projectInvoice',ruleForm.value)
            }
            request.then((response:any)=>{
                loading.value = false
                if(response.data.code != 200){
                    ElMessage.error(response.data.msg);
                    return
                }
                ElMessage.success(response.data.msg);
                id.value = response.data.data.id
                getData()
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const getData = () => {
    http.post('/projectInvoice/info',{id:id.value}).then((response:any)=>{
        if(response.data.data){
            ruleForm.value = response.data.data
            ruleForm.value.china_price = func.numberToChinese(ruleForm.value.price)
        }
        if(response.data.last){
            ruleForm.value.b_name = response.data.last.b_name
            ruleForm.value.b_address = response.data.last.b_address
            ruleForm.value.b_tax_id = response.data.last.b_tax_id
            ruleForm.value.b_mobile = response.data.last.b_mobile
            ruleForm.value.b_bank = response.data.last.b_bank
            ruleForm.value.b_bank_number = response.data.last.b_bank_number
            ruleForm.value.b_bank_account = response.data.last.b_bank_account
            ruleForm.value.b_email = response.data.last.b_email
            ruleForm.value.b_postal_code = response.data.last.b_postal_code
        }
        project.value = response.data.project
        ruleForm.value.tax_rate = response.data.project.tax_rate
        ruleForm.value.invoice_amount = response.data.project.invoice_amount
        ruleForm.value.mix = response.data.project.mix
    })
}

const onPrice = () => {
    ruleForm.value.tax_price = (ruleForm.value.price / (1 + (ruleForm.value.tax_rate/100)) * ruleForm.value.tax_rate/100).toFixed(2)
    ruleForm.value.china_price = func.numberToChinese(ruleForm.value.price)
}

const getA = () => {
    http.get('/A').then((response:any)=>{
        if(response.data.data){
            ruleForm.value.name = response.data.data.name
            ruleForm.value.tax_id = response.data.data.tax_id
            ruleForm.value.address = response.data.data.address
            ruleForm.value.mobile = response.data.data.mobile
            ruleForm.value.bank_number = response.data.data.bank_number
            ruleForm.value.bank_account = response.data.data.bank_account
            ruleForm.value.bank = response.data.data.bank
            ruleForm.value.email = response.data.data.email
            ruleForm.value.postal_code = response.data.data.postal_code
        }
    })
}

const printElement = () => {
    isPrint.value = true
}

onMounted(()=>{
    getData()
    getA()
})
</script>
<style scoped>
.form{margin:0px auto;height: calc(100vh - 20vh);overflow-y: scroll;}
.b_ .el-input{width: 100%;}
.cell-item{width: 13.5vh;}

.no-border-input {
/* 覆盖 Element Plus 的 CSS 变量 */
	--el-input-border-color: transparent;
	--el-input-focus-border-color: transparent;
	--el-input-hover-border-color: transparent;
}

/* 配合移除阴影 */
:deep(.no-border-input .el-input__inner) {
	box-shadow: none;
}
</style>
